<template>
  <scroll-view class="stepContainer">
    <block v-for="(txt, i) in title" :key="i" style="padding:0 400rpx;">
      <view class="stepBlock" @tap="toStep(i)">
        <!-- 中文序号 -->
        <view class="stepTxt" :class="{ curStep_txt: i === curStep, doneStep_txt: i < curStep }">{{ stepIndex(i) }}
        </view>
        <!-- 上层 点和线 -->
        <view class="container_lineDot">
          <view class="stepDot" :class="{ curStep_dot: i === curStep, doneStep_dot: i < curStep }"
            :data-content="i + 1">
          </view>
          <view class="stepLine" :class="{ curStep_line: i === curStep, doneStep_line: i < curStep }"></view>
        </view>
        <!-- 标题 -->
        <view class="stepTxt" :class="{ curStep_txt: i === curStep, doneStep_txt: i < curStep }">{{ txt }}</view>
      </view>
    </block>
  </scroll-view>
</template>

<script>
export default {
  name: 'component_stepLine',
  props: {
    // 标题，步骤名
    title: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 当前第几步
    curStep: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 点击步骤跳转的事件，上发点击的步骤
    toStep(step) {
      this.$emit('stepClick', step)
    },
    stepIndex(i) {
      switch (i) {
        case 0: {
          return '第一步'
        }
        case 1: {
          return '第二步'
        }
        case 2: {
          return '第三步'
        }
        case 3: {
          return '第四步'
        }
        case 4: {
          return '第五步'
        }
        case 5: {
          return '第六步'
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$doneColor: #335ac6;
$nomalColor: #ddd;

.stepContainer {
  height: 188rpx;
  z-index: 2;
  background-color: white;
  transition: 0.5s all;
  align-items: center;
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap; // 滚动必须加的属性

  .stepBlock {
    margin: 30rpx 0;
    display: inline-block;

    &:first-child {
      margin-left: 115rpx;
    }

    // 末尾线
    &:last-child {
      .stepLine {
        visibility: hidden;
      }
    }

    .curStep_txt,
    .doneStep_txt {
      color: $doneColor !important;
    }

    .stepTxt {
      text-align: center;
      margin-left: calc(-100% + 20px);
      color: $nomalColor;
    }

    .container_lineDot {
      position: relative;
      display: flex;
      align-items: center;
      height: 24rpx;
      margin: 14rpx 0;

      .stepDot {
        box-sizing: border-box;
        width: 15rpx;
        height: 15rpx;
        background-color: $nomalColor;
        border-radius: 50%;
      }

      .stepLine {
        height: 2rpx;
        width: 230rpx;
        background-color: $nomalColor;
      }

      .doneStep_dot,
      .doneStep_line {
        background-color: $doneColor;
      }

      // 当前步骤下的点
      .curStep_dot {
        background-color: $doneColor;
        border: 10rpx solid rgba(51, 90, 198, 0.3);
        background-color: $doneColor;
        position: relative;

        &::after {
          transform-origin: center;
          position: absolute;
          border-radius: 50%;
          text-align: center;
          color: white;
          width: 100%;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>
